<template>
  <div style="display:block;" class="interview_win">
    <el-dialog title="面试结果" :visible.sync="show" @close="closeWin">
      <div class="point-content">
        <div class="title">
          评估打分结果
        </div>
        <div class="point-wrap">
          <div class="name line-cell">
            <div class="cell__hd">
              面试官:
            </div>
            <div class="cell__bd">
              {{interview_data.interview_name}}
            </div>
          </div>
          <div class="point-list">
            <div class="point-item line-cell" v-for="item,index in interview_data.options_list">
              <div class="cell__hd">
                {{++index}}. {{item.name}}
              </div>
              <div class="cell__bd"></div>
              <div class="cell__ft">
                {{item.score}}
              </div>
            </div>
          </div>
          <div class="jielun">
            面试评语：{{interview_data.remark}}
          </div>
          <div class="total-point">
            总分：<span>{{interview_data.score}}</span>
          </div>
          <div class="result">
            面试结果:
            <span class="green-font"  v-if="interview_data.result==1">通过</span>
            <span class="red-font" v-else>未通过</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '@/api'
  import Http from '@/http'
  import Msg from '@/utils/msg'
  import _ from 'underscore'
  import Store from '@/store'

  export default {
    name: "cityPicker",
    data() {
      return {
        show:true
      }
    },
    props: {
      interview_data: {
        type: Object,
        default() {
          {}
        }
      },

    },
    computed: {},
    created() {

    },
    methods: {
      closeWin() {
        this.$emit('interviewWinClose')
      },
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .point-content{
    background:#fff;
    overflow: auto;
    padding-bottom:20px;
    .title{
      height:50px;
      line-height:50px;
      text-align:center;
      background:#f2f2f2;
      font-size:24px;
      font-weight:bold;
      position:relative;
      .iconfont{
        position:absolute;
        top:10px;
        right:8px;
        font-size:30px;
        line-height:30px;
        width:30px;
        color:#ccc;
      }
    }
    .point-wrap{
      padding:0 40px;
      .line-cell{
        font-size:16px;
      }
      .name{
        margin-top:30px;
        height:60px;
        line-height:60px;
        .cell__bd{
          padding-left:10px;
        }
      }
      .point-list{
        margin-top:8px;
        overflow-y: auto;
        max-height:200px;
        .point-item{
          height:30px;
          line-height:30px;
          .cell__ft{
            width:6em;
            font-size:16px;
            height:20px;
            line-height:20px;
            text-align:center;
          }
        }
      }
      .jielun{
        padding:10px;
        margin-top:10px;
        background:#ccc;
        line-height:30px;
        font-size:16px;
        text-indent:2em;
        height:108px;
      }
      .total-point{
        text-align:right;
        padding-right:30px;
        margin-top:10px;
        span{
          color:#ff6600;
          font-size:30px;
        }
      }
      .result{
        margin-top:12px;
        text-align:center;
        font-size:20px;
        line-height:60px;
        .green-font{
          color:#339999;
          font-weight:bold;
        }
        .red-font{
          color:#ff6600;
          font-weight:bold;
        }
      }
    }
  }
  .line-cell{
    background:#fff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    margin-bottom:2px;
    font-size:.7rem;
    .cell__hd {
      text-align: left;
    }
    .cell__bd {
      margin-left:10px;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
    .cell__ft {
      text-align: right;
    }
  }
</style>

